<template>
	<view class="moreCategories_box">
		<view class="tab_nav">
			<nav-bar nav_btn="back" :showShare="true" :placeholder="placeholder" :color="color" :auto_img="image">
			</nav-bar>
		</view>
		<view class="nav_list flex flexjus">
			<view class="nav_list_box">
				<scroll-view class="scroll-view_H w100" scroll-with-animation scroll-x="true"
					:scroll-into-view="'t' + tid">
					<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in navsList" :key="index"
						@click="onActive(item.id)">
						<view :id="'t' + item.id"
							:class="[navIndex == item.id ? 'nav_txt_active' : '', 'nav_list_txt', 'txtali']">
							{{item.name}}
						</view>
						<view class="nav_list_botxian" v-if="navIndex == item.id"></view>
					</view>
				</scroll-view>
			</view>
			<view class="fenlei_box" @click="onXianS">
				<image class="w100 h100" src="../../filePages/static/fenglei.png" mode=""></image>
			</view>
		</view>
		<view class="fu_chuang" v-if="show" @click="close">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item,index) in navsList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sort_box flex">
			<view class="list_box flex" v-for="(item,index) in screen_list" :key="index" @click="onSort(index)">
				<view :class="[listsIndex == index ? 'active_txt' : '', 'txt s24 f500 family']">
					{{item.txt}}
				</view>
				<image class="img" :src="item.img" mode=""></image>
			</view>
		</view>
		<view style="margin-top: 400rpx;">
			<zero-waterfall :list="goodsList" :type="type" @clear="clearData" :status="status"></zero-waterfall>
		</view>
		<view class="txtali" style="margin:50% auto;" v-if="goodsList.length == 0">
			暂无商品！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: '/pages/filePages/static/left_jian.png',
				color: 'black',
				placeholder: '畅销洗发水',
				navIndex: 0,
				listsIndex: 0,
				navsList: [],
				goodsList: [],
				tid: 0,
				show: false,
				screen_list: [
					{
						img: '/static/shopping/pingfen.png',
						txt: '人气爆款'
					},
					{
						img: '/static/shopping/zuixin.png',
						txt: '最新上架'
					},
					{
						img: '/static/shopping/jiage.png',
						txt: '价格排序'
					},
					{
						img: '/static/shopping/renqi.png',
						txt: '评分最高'
					}
				],
				totalNum: '',
				page: 1,
				type: 0,
				priceType: true,
				status: 0
			}
		},
		onLoad(e) {
			if(e) {
				this.navIndex = Number(e.index)
				this.tid = Number(e.index)
				this.type = e.type
			}
			this.getNavsList() 
		},
		onReachBottom() {
			if (this.page >= this.totalNum) {
				return false
			} else {
				this.status = 0
				this.page++
				if(this.type == 1) {
					this.getListGoods('Package/lists')
				} else {
					this.getListGoods('product/lists')
				}
			}
		},
		methods: {
			clearData(val) {
				this.goodsList = val
			},
			// 获取类目列表
			getNavsList() {
				let that = this
				that.$request({
					url: this.type == 1 ? 'wedding/worker_appointment_type' : 'common/categoryList',
					method: this.type == 1 ? 'POST' : 'GET'
				}).then(res => {
					if (res.statusCode == 200) {
						if(this.type == 1) {
							res.data.data.unshift({
								name: "全部套系",
								id: 0
							})
						} else {
							res.data.data.unshift({
								name: "全部商品",
								id: 0
							})
						}
						that.navsList = res.data.data
					}
					if(this.type == 1) {
						that.getListGoods('Package/lists')
					} else {
						that.getListGoods('product/lists')
					}
				})
			},
			// 获取分类商品
			getListGoods(url) {
				this.priceType = !this.priceType
				uni.showLoading({
					title: '加载中...'
				})
				let that = this,
					data = {
						shop_cat_id: that.navIndex,
						sort: this.listsIndex == 0 ? 'views' : this.listsIndex == 1 ? 'updatetime' : this
							.listsIndex == 2 ? 'price' : 'comment',
						order: this.priceType ? "desc" : 'asc',
					},
					data1 = {
						cat_id: that.navIndex,
						sort: this.listsIndex == 0 ? 'views' : this.listsIndex == 1 ? 'updatetime' : this
							.listsIndex == 2 ? 'price' : 'comment',
						order: this.priceType ? "desc" : 'asc',
					}
				that.$request({
					url: url,
					method: 'POST',
					data: this.type == 1 ? data : data1
				}).then(res => {
					that.totalNum = res.data.data.last_page
					that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that.goodsList
						.concat(res.data.data.data);
					uni.hideLoading()
				})
			},
			fuActive(id) {
				this.tid = id
				this.navIndex = id
				this.show = !this.show
				this.goodsList = []
				if(this.type == 1) {
					this.getListGoods('Package/lists')
				} else {
					this.getListGoods('product/lists')
				}
			},
			onActive(id) {
				this.navIndex = id
				this.tid = id
				this.goodsList = []
				this.page = 1
				this.status = 1
				this.clearData()
				if(this.type == 1) {
					this.getListGoods('Package/lists')
				} else {
					this.getListGoods('product/lists')
				}
			},
			onSort(index) {
				this.listsIndex = index
				this.goodsList = []
				this.page = 1
				this.status = 1
				this.clearData()
				if(this.type == 1) {
					this.getListGoods('Package/lists')
				} else {
					this.getListGoods('product/lists')
				}
			},
			onXianS() {
				this.show = !this.show
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.moreCategories_box {
		overflow: hidden;

		.tab_nav {
			width: 100%;
			height: 180upx;
			background-color: #E7B77D;
			position: fixed;
			top: 0;
			z-index: 99;
		}

		.nav_list {
			width: 100%;
			height: 140upx;
			margin-top: 180upx;
			padding-left: 36upx;
			background-color: #E7B77D;
			position: fixed;
			z-index: 999;
			.nav_list_box {
				width: 630upx;
		
				.scroll-view_H {
					white-space: nowrap;
					margin-top: 36upx;
					.scroll-view-item_H {
						display: inline-block;
						margin-left: 58upx;
		
						.nav_list_txt {
							width: 104upx;
							height: 36upx;
							font-size: 26upx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}
		
						.nav_txt_active {
							font-size: 26upx;
							font-family: PingFang SC-Heavy, PingFang SC;
							font-weight: 800;
							color: #FFFFFF;
						}
		
						.nav_list_botxian {
							width: 46upx;
							border-bottom: 6upx solid #FFFFFF;
							margin: 6upx auto;
						}
					}
		
					.scroll-view-item_H:nth-child(1) {
						margin-left: 0rpx;
					}
				}
			}
		
			.fenlei_box {
				width: 34upx;
				height: 34upx;
				margin-right: 74rpx;
				margin-top: 44rpx;
			}
		}

		.fu_chuang {
			width: 750upx;
			height: 1624upx;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: -100upx;
			z-index: 99999;
		
			.c_fu_chuang {
				width: 686upx;
				background: #FFFFFF;
				border-radius: 24upx 24upx 24upx 24upx;
				margin-top: 382upx;
		
				.c_fu_txt_box {
					flex-wrap: wrap;
					padding-top: 34upx;
					padding-bottom: 8upx;
		
					.list_txt {
						margin-left: 46upx;
						margin-bottom: 30upx;
		
						.fu_txt {
							color: #333;
						}
					}
				}
			}
		}

		.sort_box {
			width: 100%;
			height: 114upx;
			border-radius: 20upx 20upx 0upx 0upx;
			background: #FFFFFF;
			margin-top: -24upx;
			position: fixed;
			top: 320rpx;
			z-index: 9999;
			.list_box {
				margin-left: 56upx;
				margin-top: 44upx;
			
				.txt {
					color: #999999;
				}
			
				.active_txt {
					color: #333333;
				}
			
				.img {
					width: 32upx;
					height: 32upx;
					display: inline-block;
					margin-left: 4upx;
				}
			}
			
			.list_box:nth-child(1) {
				margin-left: 32upx;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>
